<template>
  <div class="chat-container" :style="containerStyle">
    <ChatGroupList
      class="chat-group-list"
      v-show="chatStates.groupListIsShow"
    />
    <ChatContent
      class="chat-content"
      :style="chatStates.contentStyles"
      :group-show="chatStates.groupListIsShow"
      :user-show="chatStates.userListIsShow"
    />
    <ChatUserList
      class="chat-user-list"
      v-if="chatStates.userListIsShow"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, reactive } from "vue";
import ChatContent from './ChatContent/index.vue';
import ChatGroupList from './ChatGroupList/index.vue';
import ChatUserList from './ChatUserList/index.vue';

const containerStyle = reactive({
  height: '100%',
})

const chatStates = reactive({
  groupListIsShow: true,
  contentStyles: {
    width: 'calc(100% - 300px - 165px)'
  },
  userListIsShow: true,
})

const resizeHandler = () => {
  containerStyle.height = `${document.body.clientHeight - 64 - 44 - 10}px`;
  if (window.innerWidth > 1152) {
    chatStates.groupListIsShow = chatStates.userListIsShow = true;
    chatStates.contentStyles.width = 'calc(100% - 300px - 165px)';
  } else if (window.innerWidth > 998) {
    chatStates.groupListIsShow = true;
    chatStates.userListIsShow = false;
    chatStates.contentStyles.width = 'calc(100% - 300px)';
  } else {
    chatStates.groupListIsShow = false;
    chatStates.userListIsShow = false;
    chatStates.contentStyles.width = '100%';
  }
}

onMounted(() => {
  window.addEventListener('resize', resizeHandler);
  resizeHandler();
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler);
})
</script>

<style lang="less" scoped>
.chat-container {
  display: flex;
  justify-content: space-between;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 5px;

  .chat-group-list {
    width: 300px;
  }

  .chat-content {
    width: calc(100% - 300px - 150px);
  }

  .chat-user-list {
    width: 165px;
  }
}
</style>
